<template>
  <div class="mod-config">
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">

      <el-table-column
        type="index"
        label="序号"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        prop="yaoCaiMingCheng"
        header-align="center"
        align="center"
        label="药材名称">
      </el-table-column>
      <el-table-column
        prop="xuQiuLiang"
        header-align="center"
        align="center"
        label="需求量">
      </el-table-column>
      <el-table-column
        prop="guiGe"
        header-align="center"
        align="center"
        label="规格">
      </el-table-column>
      <el-table-column
        prop="shiFouShangJia"
        header-align="center"
        align="center"
        label="上架状态">
      </el-table-column>
<!--      <el-table-column
        prop="lianXiRen"
        header-align="center"
        align="center"
        label="联系人">
      </el-table-column>
      <el-table-column
        prop="lianXiDianHua"
        header-align="center"
        align="center"
        label="联系电话">
      </el-table-column>-->
      <el-table-column
        prop="yaoCaiChanDi"
        header-align="center"
        align="center"
        label="药材产地">
      </el-table-column>
      <el-table-column
        prop="jiaoHuoDiZhi"
        header-align="center"
        align="center"
        label="交货地址">
      </el-table-column>
      <el-table-column
        prop="faBuShiJian"
        header-align="center"
        align="center"
        label="发布时间">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small"
                     @click="infoHandle(scope.row.id)"><i class="el-icon-edit"></i>查看详情</el-button>
<!--          <el-button type="text" size="small"
                     @click="xiaJiaHandel(scope.row.id)"><i class="el-icon-edit"></i>下架</el-button>
         -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 详情-->
    <el-dialog title="采购管理药材采购" :visible.sync="infoVisible" :modal-append-to-body="false" :modal="false" >
      <div class="mod-config">
        <el-row>
          <div class="el-descriptions__title custom-title">采购详情</div>
        </el-row>
        <el-row :gutter="0" style="display: flex">
          <el-col :span="10" style="align-items: stretch;margin-right: 16px;">
            <img class="devImg" fit="fill" style="width: 100%;height: 330px" :src="this.$http.adornUrl('/api-file/file/view/file?fileId='+ this.infoList.yaoCaiTuPian) ">
            <el-descriptions :column="1"   :colon="false" content-class-name="my-content">
              <el-descriptions-item label="">{{this.infoList.yaoCaiMingCheng}}</el-descriptions-item>
            </el-descriptions>
            <p style="text-align: center;font-size: 14px">发布时间:{{this.infoList.faBuShiJian}}</p>
          </el-col>
          <el-col :span="10">
            <el-descriptions :column="1" label-class-name="myLableClassName" >
              <el-descriptions-item label="规格">{{this.infoList.guiGe}}</el-descriptions-item>
              <el-descriptions-item label="药材产地">{{this.infoList.yaoCaiChanDi}}</el-descriptions-item>
              <el-descriptions-item label="企业">{{this.infoList.qiYe}}</el-descriptions-item>
              <el-descriptions-item label="可供票据">{{this.infoList.piaoJu}}</el-descriptions-item>
              <el-descriptions-item label="资质标准">{{this.infoList.ziZhiBiaoZhun}}</el-descriptions-item>
              <el-descriptions-item label="质量标准">{{this.infoList.zhiLiangBiaoZhun}}</el-descriptions-item>
              <el-descriptions-item label="付款方式">{{this.infoList.fuKuanFangShi}}</el-descriptions-item>
              <el-descriptions-item label="联系人">{{this.infoList.lianXiRen}}</el-descriptions-item>
              <el-descriptions-item label="联系电话">{{this.infoList.lianXiDianHua}}</el-descriptions-item>
              <el-descriptions-item label="交货地">{{this.infoList.jiaoHuoDiZhi}}</el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="4">
            <p style="text-align: left;font-size: 18px;font-weight:bold;color: red">需求量：{{this.infoList.xuQiuLiang}}公斤</p>
            <p style="text-align: left;font-size: 20px;font-weight:bold;color: #00a2d4">{{this.infoList.baoJiaRenShu}}</p>
            <p style="text-align: left;font-size: 20px;font-weight:bold;color: #00a2d4">{{this.infoList.shiFouShangJia}}</p>
          </el-col>
        </el-row>
<!--        <el-row>
          <div class="el-descriptions__title custom-title">报价详情</div>
        </el-row>
        <el-row>
          <bao-jia-zu-jian ref="baoJ"></bao-jia-zu-jian>
        </el-row>-->

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="qxinfo()">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ImgUpload from "../../components/upload/ImgUpload.vue";
// import baoJiaZuJian from "./baoJiaZuJian.vue";
export default {
  props: {
    yongHuId: String // 接收并展示来自父组件的值
  },
  components: {ImgUpload},
  data() {
    return {
      dataForm: {
        yaoCaiMingCheng:'',
        xuQiuLiang:'',
        guiGe:'',
        zhuangTai:'',
        lianXiRen:'',
        lianXiDianHua:'',
        yaoCaiChanDi:'',
        jiaoHuoDiZhi:'',
        faBuShiJian:'',
        baoJiaRenShu:'',
        qiYe:'',
        ziZhiBiaoZhun:'',
        zhiLiangBiaoZhun:'',
        piaoJu:'',
        fuKuanFangShi:'',
        shiFouShangJia:'',
        yaoCaiTuPian:'',
        jiYang:'',
        baoZhuang:'',
        guanLianYongHu:'',
      },
      dataSaveForm: {
        yaoCaiMingCheng:'',
        xuQiuLiang:'',
        guiGe:'',
        zhuangTai:'',
        lianXiRen:'',
        lianXiDianHua:'',
        yaoCaiChanDi:'',
        jiaoHuoDiZhi:'',
        faBuShiJian:'',
        baoJiaRenShu:'',
        qiYe:'',
        ziZhiBiaoZhun:'',
        zhiLiangBiaoZhun:'',
        piaoJu:'',
        fuKuanFangShi:'',
        shiFouShangJia:'',
        yaoCaiTuPian:'',
        jiYang:'',
        baoZhuang:'',
      },
      dataRule: {
        yaoCaiMingCheng: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        xuQiuLiang: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        guiGe: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        lianXiRen: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        lianXiDianHua: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        yaoCaiChanDi: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        jiaoHuoDiZhi: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        qiYe: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        ziZhiBiaoZhun: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        zhiLiangBiaoZhun: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        piaoJu: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        fuKuanFangShi: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        shiFouShangJia: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        yaoCaiTuPian: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        jiYang: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        baoZhuang: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],

      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,

      infoList:[],
      infoLoading: false,
      infoVisible: false,
      list1:[],
      isBoolean1: false,
    }
  },

  activated() {
    this.getDataList()
  },
  methods: {
    xiaJiaHandel(id){
      this.$http({
        url: this.$http.adornUrl(`/api-trading/caiGouGuanLi/caiGouGuanLiYaoCaiCaiGou/save`),
        method: 'post',
        data: this.$http.adornData({
          'id': id,
          'shiFouShangJia': "下架",
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.addOrUpdateVisible = false
              this.getDataList()
            }
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    getDataList(pageIndex) {
      if (pageIndex) {
        this.pageIndex = pageIndex
      }
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/api-trading/caiGouGuanLi/caiGouGuanLiYaoCaiCaiGou/getList'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
          'yaoCaiMingCheng': this.dataForm.yaoCaiMingCheng,
          'xuQiuLiang': this.dataForm.xuQiuLiang,
          'guiGe': this.dataForm.guiGe,
          'zhuangTai': this.dataForm.zhuangTai,
          'lianXiRen': this.dataForm.lianXiRen,
          'lianXiDianHua': this.dataForm.lianXiDianHua,
          'yaoCaiChanDi': this.dataForm.yaoCaiChanDi,
          'jiaoHuoDiZhi': this.dataForm.jiaoHuoDiZhi,
          'faBuShiJian': this.dataForm.faBuShiJian,
          'baoJiaRenShu': this.dataForm.baoJiaRenShu,
          'qiYe': this.dataForm.qiYe,
          'ziZhiBiaoZhun': this.dataForm.ziZhiBiaoZhun,
          'zhiLiangBiaoZhun': this.dataForm.zhiLiangBiaoZhun,
          'piaoJu': this.dataForm.piaoJu,
          'fuKuanFangShi': this.dataForm.fuKuanFangShi,
          'shiFouShangJia': this.dataForm.shiFouShangJia,
          'yaoCaiTuPian': this.dataForm.yaoCaiTuPian,
          'jiYang': this.dataForm.jiYang,
          'baoZhuang': this.dataForm.baoZhuang,
          'guanLianYongHu':this.yongHuId

        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.data.list
          this.totalPage = Number(data.data.totalCount)
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    qx() {
      this.addOrUpdateVisible = false;

    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.list1=[];
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (id) {
          this.$http({
            url: this.$http.adornUrl(`/api-trading/caiGouGuanLi/caiGouGuanLiYaoCaiCaiGou/getById`),
            method: 'get',
            params: this.$http.adornParams({"id":id})
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataSaveForm.id = data.data.id
              this.dataSaveForm.yaoCaiMingCheng = data.data.yaoCaiMingCheng;
              this.dataSaveForm.xuQiuLiang = data.data.xuQiuLiang;
              this.dataSaveForm.guiGe = data.data.guiGe;
              this.dataSaveForm.zhuangTai = data.data.zhuangTai;
              this.dataSaveForm.lianXiRen = data.data.lianXiRen;
              this.dataSaveForm.lianXiDianHua = data.data.lianXiDianHua;
              this.dataSaveForm.yaoCaiChanDi = data.data.yaoCaiChanDi;
              this.dataSaveForm.jiaoHuoDiZhi = data.data.jiaoHuoDiZhi;
              this.dataSaveForm.faBuShiJian = data.data.faBuShiJian;
              this.dataSaveForm.baoJiaRenShu = data.data.baoJiaRenShu;
              this.dataSaveForm.qiYe = data.data.qiYe;
              this.dataSaveForm.ziZhiBiaoZhun = data.data.ziZhiBiaoZhun;
              this.dataSaveForm.zhiLiangBiaoZhun = data.data.zhiLiangBiaoZhun;
              this.dataSaveForm.piaoJu = data.data.piaoJu;
              this.dataSaveForm.fuKuanFangShi = data.data.fuKuanFangShi;
              this.dataSaveForm.shiFouShangJia = data.data.shiFouShangJia;
              this.dataSaveForm.yaoCaiTuPian = data.data.yaoCaiTuPian;
              if(data.data.yaoCaiTuPian){
                this.list1=[];
                this.list1.push({name: 'img', url: this.$http.adornUrl('/api-file/file/view/file?fileId=' + data.data.yaoCaiTuPian)})
                this.isBoolean1 = true
              }
              this.dataSaveForm.jiYang = data.data.jiYang;
              this.dataSaveForm.baoZhuang = data.data.baoZhuang;
              this.dataSaveForm.guanLianYongHu = data.data.guanLianYongHu;
            }
          })
        }
      })

    },
    qxinfo() {
      this.infoVisible = false;

    },
    // 新增 / 修改
    infoHandle(id) {
      this.infoVisible = true;
      this.$nextTick(() => {
        this.$refs.baoJ.init(id)
      })
      this.infoList=[];
      this.$http({
        url: this.$http.adornUrl(`/api-trading/caiGouGuanLi/caiGouGuanLiYaoCaiCaiGou/getById`),
        method: 'get',
        params: this.$http.adornParams({"id":id})
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.infoList=data.data;
        }
      })
    },
    // 删除
    deleteHandle(id) {
      var ids = id ? [id] : this.dataListSelections.map(item => {
        return item.id
      })
      this.$confirm(`确定要进行删除操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/api-trading/caiGouGuanLi/caiGouGuanLiYaoCaiCaiGou/delByIds'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/api-trading/caiGouGuanLi/caiGouGuanLiYaoCaiCaiGou/save`),
            method: 'post',
            data: this.$http.adornData({
              'id': this.dataSaveForm.id || undefined,
              'yaoCaiMingCheng': this.dataSaveForm.yaoCaiMingCheng,
              'xuQiuLiang': this.dataSaveForm.xuQiuLiang,
              'guiGe': this.dataSaveForm.guiGe,
              'zhuangTai': this.dataSaveForm.zhuangTai,
              'lianXiRen': this.dataSaveForm.lianXiRen,
              'lianXiDianHua': this.dataSaveForm.lianXiDianHua,
              'yaoCaiChanDi': this.dataSaveForm.yaoCaiChanDi,
              'jiaoHuoDiZhi': this.dataSaveForm.jiaoHuoDiZhi,
              'faBuShiJian': this.dataSaveForm.faBuShiJian,
              'baoJiaRenShu': this.dataSaveForm.baoJiaRenShu,
              'qiYe': this.dataSaveForm.qiYe,
              'ziZhiBiaoZhun': this.dataSaveForm.ziZhiBiaoZhun,
              'zhiLiangBiaoZhun': this.dataSaveForm.zhiLiangBiaoZhun,
              'piaoJu': this.dataSaveForm.piaoJu,
              'fuKuanFangShi': this.dataSaveForm.fuKuanFangShi,
              'shiFouShangJia': this.dataSaveForm.shiFouShangJia,
              'yaoCaiTuPian': this.dataSaveForm.yaoCaiTuPian,
              'jiYang': this.dataSaveForm.jiYang,
              'baoZhuang': this.dataSaveForm.baoZhuang,
              'guanLianYongHu': this.dataSaveForm.guanLianYongHu,
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.addOrUpdateVisible = false
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })


    },
  }
}
</script>
<style>
.imgBox {
  border: 1px solid #ebeef5;
  border-left: none;
  width: 100%;
  height: 100%;
  position: relative;
  .devImg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: auto;
    max-height: 100%;
    padding: 12px 10px;
  }
}
.my-content{
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
//height: 100vh; /* 设置容器高度为视口高度 */
  align-items:center;text-align: center;
  font-weight:bold;font-size: 18px;

}
.custom-title{
  margin-bottom: 20px;
//margin-top: 20px;
}
.myLableClassName {
  color: rgb(19 35 29 / 77%);text-align:right;font-weight:bold;font-size: 16px;
}
</style>
